<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html"
        renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="ESMETIL">

        <f:facet name="postinit">
            <link rel="apple-touch-icon" href="/Esmetil/resources/images/apple-touch-icon.png" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="initial-scale=1" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
        </f:facet>

        <!-- Main View -->
        <pm:view id="main" swatch="c">                                    
            <pm:header title="Esmetil Mobile">
            </pm:header>

            <pm:content>

                <h:form id="estacionesForm">
                    <p:dataList type="inset" value="#{usuarioMenuController.usuario.estacionList}" var="estacion">
                        <p:column>
                            <p:commandLink value="Estación: #{estacion.codigo}" update=":magnitudesForm:magnitudes" action="pm:magnitudes">
                                <f:setPropertyActionListener value="#{estacion}" target="#{indexController.estacionSeleccionda}" />
                            </p:commandLink>
                        </p:column>
                    </p:dataList>
                </h:form>

            </pm:content>

        </pm:view>

        <!-- Summaries -->
        <pm:view id="magnitudes" swatch="c">
            <pm:header title="Magnitudes">
                <f:facet name="left"><p:button value="Atras" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="magnitudesForm">

                    <p:dataList id="magnitudes" value="#{indexController.estacionSeleccionda.estacionDetalleList}" var="detalle">
                        <p:graphicImage value="/resources/images/magnitudes/#{detalle.magnitud.nombreimagen}.png"/>
                        <h2>#{detalle.magnitud.descripcion}</h2>
                        <h:outputText value="#{indexController.fechaUltMuestra(detalle)}" style="font-size: 12px; font-weight: normal">
                            <f:convertDateTime pattern="MM/dd/yyyy hh:mm a" />
                        </h:outputText>
                        <h:outputText styleClass="ui-li-count" value="#{indexController.ultValor(detalle)} #{detalle.unidadMedida.simbolo}" />
                    </p:dataList>

                </h:form>
            </pm:content>
        </pm:view>

    </pm:page>

</f:view>

